<template>
  <div class="main-box" ref="mainBox">

      <el-select v-model="selectedBox" @change="handleChange" style="position: absolute;right:120px;z-index: 5">
        <el-option label="设备一" value="1"></el-option>
        <el-option label="设备二" value="2"></el-option>
        <el-option label="设备三" value="3"></el-option>
      </el-select>

    <div class="canvas-container" ref="containBox"></div>

    <div  id="contextMenu" style="display: none" class="hidden">
      <a href="#" id="selectItem">添加人员</a>
      <a href="#" id="cancel">取消</a>
    </div>
    <div style="width:250px;background: #EEEEEE;display:flex;justify-content:flex-end;position: relative;left:82%;bottom: 100px" >
      <el-button @click="handleWarn">告警</el-button>
      <el-button @click="cancelWarn">取消告警</el-button>

    </div>
  </div>


</template>

<script>
import Konva from 'konva';

export default {
  name: "MainView",
  props: {
    elements: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      isBlinking: false,
      stage: null,
      layer: null,
      transformer: null,
      selectedBox:null
    };
  },
  watch: {
    elements: {
      handler(newElements) {
        // 当 elements 发生变化时，重新绘制元素
        console.log(newElements, '接收到新增元素啦');
        this.updateCanvas();
      },
      deep: true // 深度监听数组中的对象变化
    },
    isBlinking:{
      handler(newval) {
        console.log(newval,'newval')
        this.init()
      }
    },
    selectedBox:{
      handler(newval) {
        console.log(newval,'selectedBox')
        if(newval=='设备一'){
          this.selectedBox=1
        }else if(newval=='设备二'){
          this.selectedBox=2
        }else if(newval=='设备三'){
          this.selectedBox=3
        }
        this.init()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();

    });
  },
  methods: {
    handleChange(val){
      this.selectedBox = val;
    },
    init() {
      const containBox = this.$refs.containBox;

      // 创建舞台
      this.stage = new Konva.Stage({
        width: 1600,
        height: 750,
        container: containBox,
      });

      // 创建图层
      this.layer = new Konva.Layer();

      // 创建背景图片元素
      const bgImage = new Image();
      bgImage.src = require('@/assets/bg.png'); // 替换成你图片的实际路径

      // 当图片加载完成时，创建 Konva.Image 并将其添加到图层
      bgImage.onload = () => {
        const konvaImage = new Konva.Image({
          x: 200, // 图片的X坐标
          y: 50, // 图片的Y坐标
          image: bgImage,
          width: 850, // 图片的宽度
          height: 650, // 图片的高度
          draggable: false
        });

        this.layer.add(konvaImage);
        this.layer.draw(); // 重新绘制图层，确保图片显示
      };

      // 红色电箱 1
      const ele1=new Image()
      ele1.src=require('@/assets/svg/电箱b (1).svg')
      ele1.onload = () => {
        const eleImage = new Konva.Image({
          x: 790, // 图片的X坐标
          y: 80, // 图片的Y坐标
          image: ele1,
          width: 40, // 图片的宽度
          height: 40, // 图片的高度
          draggable: false
        })
        // 创建一个不可见的矩形用于作为边框
        const borderRect = new Konva.Rect({
          x: 790, // 图片的X坐标
          y: 80, // 图片的Y坐标
          width: 40, // 矩形的宽度
          height: 40, // 矩形的高度
          stroke: 'red', // 边框颜色
          strokeWidth: 2, // 边框宽度
          cornerRadius: 0, // 圆角半径
          listening: false, // 不监听事件
          visible: false // 初始时隐藏
        });
        // 创建一个 不可见警告悬浮框
        const warnBox=new Konva.Rect({
          x: 850, // 图片的X坐标
          y: 50, // 图片的Y坐标
          width: 100, // 矩形的宽度
          height: 50, // 矩形的高度
          fill:'white',
          stroke: 'red', // 边框颜色
          strokeWidth: 1, // 边框宽度
          cornerRadius:5,//圆角半径
          listening: true, // 不监听事件
          visible: false // 初始时隐藏
        })

        const warnText=new Konva.Text({
          x: 866, // 图片的X坐标
          y: 68, // 图片的Y坐标
          text:'取消告警',
          fontSize:13,
          fontFamily:'Microsoft YaHei',
          fill:'black',
          listening: false,
          visible:false
        })
        const warnTextbox=new Konva.Rect({
          x: 860, // 图片的X坐标
          y: 60, // 图片的Y坐标
          width: 70, // 矩形的宽度
          height: 25, // 矩形的高度
          fill:'transparent',
          stroke: 'black', // 边框颜色
          strokeWidth: 1, // 边框宽度
          cornerRadius:3,//圆角半径
          listening: false, // 不监听事件
          visible: false // 初始时隐藏
        })

        // 为 warnBox 添加点击事件处理程序
        warnBox.on('click', () => {
          this.isBlinking = false;
          console.log('warnBox 被点击');
        });
        // 当点击图片时，显示或隐藏边框
        eleImage.on('click', () => {
          this.selectedBox = 1; // 记录当前点击的电箱
          console.log('电箱1被选中');

          // 切换边框的可见性
          borderRect.setVisible(!borderRect.isVisible());
          // 切换警告悬浮框可见性
          warnBox.setVisible(!warnBox.isVisible());
          // 悬浮取消告警按钮文字
          warnText.setVisible(!warnText.isVisible())
          // 悬浮取消按钮盒子
          warnTextbox.setVisible(!warnTextbox.isVisible());

          this.layer.batchDraw(); // 重新绘制图层，确保图片显示
        });


        // 将图像和边框都加入到图层中
        this.layer.add(eleImage);
        this.layer.add(borderRect);
        this.layer.add(warnBox);
        this.layer.add(warnText)
        this.layer.add(warnTextbox)
        this.layer.draw(); // 重新绘制图层，确保图片显示

        this.layer.add(eleImage);
        this.layer.draw(); // 重新绘制图层，确保图片显示
      }
      // 创建电箱 红色
      const ele2=new Image()
      ele2.src=require('@/assets/svg/电箱b (1).svg')
      ele2.onload = () => {
        const eleImage = new Konva.Image({
          x: 340, // 图片的X坐标
          y: 300, // 图片的Y坐标
          image: ele2,
          width: 40, // 图片的宽度
          height: 40, // 图片的高度
          draggable: false
        })
        // 创建一个不可见的矩形用于作为边框
        const borderRect = new Konva.Rect({
          x: 340, // 矩形的X坐标
          y: 300, // 矩形的Y坐标
          width: 40, // 矩形的宽度
          height: 40, // 矩形的高度
          stroke: 'red', // 边框颜色
          strokeWidth: 2, // 边框宽度
          cornerRadius: 0, // 圆角半径
          listening: false, // 不监听事件
          visible: false // 初始时隐藏
        });

        // 当点击图片时，显示或隐藏边框
        eleImage.on('click', () => {
          this.selectedBox = 2; // 记录当前点击的电箱
          console.log('电箱2被选中');

          // 切换边框的可见性
          borderRect.setVisible(!borderRect.isVisible());
          this.layer.batchDraw(); // 重新绘制图层，确保图片显示
        });

        // 将图像和边框都加入到图层中
        this.layer.add(eleImage);
        this.layer.add(borderRect);
        this.layer.draw(); // 重新绘制图层，确保图片显示

        this.layer.add(eleImage);
        this.layer.draw(); // 重新绘制图层，确保图片显示
      }
      // 悬浮图片警告
      if(this.isBlinking){
        const list=[{x:340, y:260},{x:550, y:190},{x:790, y:45}]
        console.log(list)
        // 创建电箱 告警
        const warn=new Image()
        warn.src=require('@/assets/warn2.gif')
        warn.onload = () => {
            if(this.selectedBox==2){
                const eleImage = new Konva.Image({
                  x: 340, // 图片的X坐标
                  y: 260, // 图片的Y坐标
                  image: warn,
                  width: 40, // 图片的宽度
                  height: 40, // 图片的高度
                  draggable: false
                })
              this.layer.add(eleImage);
              this.layer.draw(); // 重新绘制图层，确保图片显示
              let opacity = 1; // 初始不透明度
              setInterval(() => {
                if (opacity === 1) {
                  opacity = 0; // 设置不透明度为 0
                } else {
                  opacity = 1; // 设置不透明度为 1
                }
                eleImage.opacity(opacity); // 更新不透明度
                this.layer.draw(); // 重新绘制图层
              }, 500); // 每 500 毫秒切换一次

            }else if(this.selectedBox==3){
              const eleImage = new Konva.Image({
                x: 550, // 图片的X坐标
                y: 190, // 图片的Y坐标
                image: warn,
                width: 40, // 图片的宽度
                height: 40, // 图片的高度
                draggable: false
              })
              this.layer.add(eleImage);
              this.layer.draw(); // 重新绘制图层，确保图片显示
              let opacity = 1; // 初始不透明度
              setInterval(() => {
                if (opacity === 1) {
                  opacity = 0; // 设置不透明度为 0
                } else {
                  opacity = 1; // 设置不透明度为 1
                }
                eleImage.opacity(opacity); // 更新不透明度
                this.layer.draw(); // 重新绘制图层
              }, 500); // 每 500 毫秒切换一次

            }else if(this.selectedBox==1){
              const eleImage = new Konva.Image({
                x: 790, // 图片的X坐标
                y: 45, // 图片的Y坐标
                image: warn,
                width: 40, // 图片的宽度
                height: 40, // 图片的高度
                draggable: false
              })
              this.layer.add(eleImage);
              this.layer.draw(); // 重新绘制图层，确保图片显示
              let opacity = 1; // 初始不透明度
              setInterval(() => {
                if (opacity === 1) {
                  opacity = 0; // 设置不透明度为 0
                } else {
                  opacity = 1; // 设置不透明度为 1
                }
                eleImage.opacity(opacity); // 更新不透明度
                this.layer.draw(); // 重新绘制图层
              }, 500); // 每 500 毫秒切换一次
            }

            }


      }


      const ele3 = new Image();
      ele3.src = require('@/assets/svg/电箱b (2).svg');
      ele3.onload = () => {
        const eleImage = new Konva.Image({
          x: 550, // 图片的X坐标
          y: 230, // 图片的Y坐标
          image: ele3,
          width: 40, // 图片的宽度
          height: 40, // 图片的高度
          draggable: false,
        });
        // 创建一个不可见的矩形用于作为边框
        const borderRect = new Konva.Rect({
          x: 550, // 矩形的X坐标
          y: 230, // 矩形的Y坐标
          width: 40, // 矩形的宽度
          height: 40, // 矩形的高度
          stroke: 'red', // 边框颜色
          strokeWidth: 2, // 边框宽度
          cornerRadius: 0, // 圆角半径
          listening: false, // 不监听事件
          visible: false // 初始时隐藏
        });

        // 当点击图片时，显示或隐藏边框
        eleImage.on('click', () => {
          this.selectedBox = 3; // 记录当前点击的电箱
          console.log('电箱3被选中');

          // 切换边框的可见性
          borderRect.setVisible(!borderRect.isVisible());
          this.layer.batchDraw(); // 重新绘制图层，确保图片显示
        });

        // 将图像和边框都加入到图层中
        this.layer.add(eleImage);
        this.layer.add(borderRect);
        this.layer.draw(); // 重新绘制图层，确保图片显示

        eleImage.on('contextmenu', (event) => {
          // 获取原生事件对象
          var nativeEvent = event.evt;

          // 阻止默认行为
          nativeEvent.preventDefault();

          var menu = document.getElementById('contextMenu');
          menu.style.left = nativeEvent.clientX + 'px';
          menu.style.top = nativeEvent.clientY + 'px';
          menu.style.display = 'block';

          // 确保只绑定一次事件
          menu.onclick = (e) => {
            const target = e.target;

            if (target.id === 'selectItem') {
              console.log('添加人员');
              menu.style.display = 'none';
            } else if (target.id === 'cancel') {
              console.log('取消');
              this.layer.draw();  // 重新绘制图层
              menu.style.display = 'none';
            }
          };
        });

        this.layer.add(eleImage);
        this.layer.draw(); // 重新绘制图层，确保图片显示
      };


      // 初始化图层
      this.stage.add(this.layer);

      // 添加鼠标滚轮缩放功能
      this.stage.on('wheel', (e) => {
        e.evt.preventDefault();

        const scaleBy = 1.05; // 缩放因子
        const oldScale = this.stage.scaleX(); // 获取当前缩放比例
        const pointer = this.stage.getPointerPosition(); // 获取鼠标位置

        const mousePointTo = {
          x: (pointer.x - this.stage.x()) / oldScale,
          y: (pointer.y - this.stage.y()) / oldScale,
        };

        // 根据滚轮滚动的方向决定缩放
        const newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

        this.stage.scale({ x: newScale, y: newScale });

        const newPos = {
          x: pointer.x - mousePointTo.x * newScale,
          y: pointer.y - mousePointTo.y * newScale,
        };
        this.stage.position(newPos);
        this.stage.batchDraw();
      });

      this.stage.on('mousedown', function() {
        this.stage.container().style.cursor = 'move';
      }.bind(this));

      this.stage.on('mouseup', function() {
        this.stage.container().style.cursor = 'default';
      }.bind(this));
      this.stage.draggable(false);

      // 点击缩放图形
      // this.stage.on('click tap', function(e) {
      //   if (e.target === this.stage) {
      //     console.log(e, 'e');
      //     if (this.transformer) {
      //       this.transformer.destroy();
      //       this.transformer = null;
      //       this.layer.draw();
      //     }
      //     return;
      //   }
      //
      //   if (e.target.hasName('rect')) {
      //     return;
      //   }
      //
      //   if (!this.transformer) {
      //     this.transformer = new Konva.Transformer({
      //       node: e.target,
      //       enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
      //     });
      //
      //     this.layer.add(this.transformer);
      //     this.layer.draw();
      //   }
      // }.bind(this));

    },

    updateCanvas() {
      // 清除之前的 Transformer
      if (this.transformer) {
        this.transformer.destroy();
        this.transformer = null;
      }

      // 遍历拿到的新元素
      this.elements.forEach(element => {
        console.log(element, 'element');
        if (element.type === 'image') {
          const imageObj = new Image();
          imageObj.src = element.config.src;

          // 当图片加载完成时，创建 Konva.Image 并将其添加到图层
          imageObj.onload = () => {
            let konvaImage = this.layer.find(node => node.image() === imageObj)[0];
            if (!konvaImage) {
              konvaImage = new Konva.Image({
                x: element.config.x || 0, // 图片的X坐标，默认为0
                y: element.config.y || 0, // 图片的Y坐标，默认为0
                image: imageObj,
                width: element.config.width || 100, // 图片的宽度，默认为100
                height: element.config.height || 100, // 图片的高度，默认为100
                draggable: true
              });
              this.layer.add(konvaImage);
            } else {
              konvaImage.x(element.config.x || 0);
              konvaImage.y(element.config.y || 0);
              konvaImage.width(element.config.width || 100);
              konvaImage.height(element.config.height || 100);
            }
            this.layer.draw(); // 重新绘制图层，确保图片显示
          };
        }
      });
    },

  //   设置告警
    handleWarn(){
      this.isBlinking=true
    },
  //   取消告警
    cancelWarn(){
    this.isBlinking=false
    },


  }
};
</script>

<style scoped src="./MainView.css"></style>









